<!-- 运营统计 -->
<template>
  <div class="operateStatic">
    <div class="tip">
      <span
        >截至{{ nowaday }}，年度安全运营天数 <span class="count">3618</span>天
      </span>
    </div>
    <div class="chart-part">
        <v-chart ref="chartRef" id="operateChart" :style="{ width: '100%', height: '100%' }" :option="options"></v-chart>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, onMounted,nextTick } from 'vue';
import { operateOpts } from '@/cesiumTools/echartsOpts';
import { watchLineData,useLineData } from '@/store'
const lineDataStore = useLineData()

const nowaday = ref(dayjs().format('YYYY/M/DD'));
const dataSource = ref([]);
const chartRef = ref(null);//图表组件

let options = ref(null)
const initChart = (dataSource) => {
  const data = dataSource.map((item) => ({
    name: item.name,
    value: Number(item.length),
  }));
   options.value = operateOpts(data);
};

let lineData = lineDataStore.lineData
onMounted(async () => {
  if(!lineData.length){
    lineData = await watchLineData();//从store中获取数据
  }
  dataSource.value = lineData;
  initChart(lineData);

  //  关键：等待图表初始化完成后，延迟触发重绘----解决vue-echart样式不对问题
  await nextTick(); // 确保图表已渲染(dom已经渲染)
  setTimeout(() => {
    if (chartRef.value) {
      chartRef.value.resize(); // 强制基于当前正确尺寸重绘
    }
  }, 10); // 延迟 10ms 确保容器尺寸稳定
});

</script>
<style scoped>
.operateStatic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tip {
  height: 30px;
  width: 100%;
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
}

.count {
  font-size: 26px;
  color: #ef9c00;
  letter-spacing: 3px;
}

.chart-part {
  flex: 1;
  display: flex;
  pointer-events: all;
  padding-left: 10px;
}

#operateChart {
  pointer-events: all;
}

.dataList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.data-item {
  width: 50%;
  color: #fff;
}
</style>
